
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
    Image,
  Button,
  TextInput,
    ScrollView,
  TouchableOpacity,
} from 'react-native';
import Colors from '../../assets/colors'
import mockData from './mockData'
import Dialog from '../../routes/DialogTip'

const RadioBtn = props => {

  const { name, selected, action } = props

  return(
    <TouchableOpacity onPress={action}>
      <View style={styles.radioBtn}>
        <Text style={[styles.radioBtnText, selected ? styles.selectedText : null]}>
          {name}
        </Text>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {
  render() {

    const { detail, agree, opinion, changeAgree, changeOpinion, submit, dialogText } = this.props
    return (
      <View style={styles.mainContainer}>
        <ScrollView>
          <View style={styles.container}>
              {
                  detail.map((val, index) =>
                      <View style={styles.itemContainer} key={index}>
                        <View style={styles.labelContainer}>
                          <Text style={[styles.textStyle, styles.labelText]}>{val.label}</Text>
                        </View>
                        <View style={styles.valueContainer}>
                            {
                                val.problemArr.length>0?
                                    val.problemArr.map((i,index )=>(
                                        <Text style={[styles.textStyle, styles.valueText]}>{index+1+'、'+i.problem}</Text>
                                    ))
                                    :
                                    val.arr.length >0?
                                        val.arr.map(i =>(
                                            <Image style={{width:150,height:80,marginLeft:10}}  source={{uri:i.url}} />
                                        )):
                                        <Text style={[styles.textStyle, styles.valueText]}>{val.value !== '' ? val.value: ''}</Text>
                            }
                        </View>
                      </View>
                  )
              }
          </View>
          <View style={styles.examinationContainer}>

            <View style={styles.titleContainer}>
              <Text style={styles.titleText}>审核</Text>
            </View>

            <View style={styles.formContainer}>

              <View style={styles.rowContainer}>
                <View style={styles.operationContainer}>
                  <Text style={[styles.textStyle, styles.labelText]}>审核</Text>
                </View>
                <View style={styles.operationValueContainer}>
                  <RadioBtn name={'同意'} selected={agree} action={changeAgree}/>
                  <RadioBtn name={'驳回'} selected={!agree} action={changeAgree}/>
                </View>
              </View>

              <View style={styles.rowContainer}>
                <View style={styles.operationContainer}>
                  <Text style={[styles.textStyle, styles.labelText]}>意见</Text>
                </View>
                <View style={styles.operationValueContainer}>
                  <TextInput
                      multiline={true}
                      value={opinion}
                      style={[styles.textStyle, styles.textInputStyle]}
                      onChangeText={(val) => changeOpinion(val)}
                      placeholder={'点此输入审批意见'}
                  />
                </View>
              </View>

              <View style={styles.rowContainer}>
                <View style={styles.operationContainer}>
                  <Text style={[styles.textStyle, styles.labelText]}>&nbsp;</Text>
                </View>
                <View style={styles.operationValueContainer}>
                  <View style={{width: 70, justifyContent: 'center', marginRight: 10, marginLeft: 10,}}>
                    <Button
                        title={'保存'}
                        onPress={submit}
                    />
                  </View>
                    {/*{*/}
                    {/*dialogText === ''?null:*/}
                    {/*<Dialog isShow={'true'} text={dialogText} />*/}
                    {/*}*/}
                  <View style={{width: 70, justifyContent: 'center'}}>
                    <Button
                        title={'返回'}
                        onPress={() => Actions.pop()}
                        color={'lightgray'}
                    />
                  </View>
                </View>
              </View>

            </View>

          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    height: '100%',
  },
  container: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingTop: 10,
    marginLeft: 2,
    paddingLeft: 10,
    paddingRight: 10,
    overflow: 'scroll',
  },
  itemContainer: {
    width: '50%',
    display: 'flex',
    flexDirection: 'row',
    marginLeft: -1,
    marginTop: -1,
  },
  labelContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  valueContainer: {
    flex: 2,
    backgroundColor: '#fff',
    justifyContent: 'center',
    marginLeft: -1,
  },
  textStyle: {
    fontSize: 18,
    paddingTop: 8,
    paddingBottom: 8,
    paddingLeft: 10,
    paddingRight: 10,
    borderColor: Colors.backgroundLightGray,
    borderWidth: 1,
  },
  labelText: {
    textAlign: 'right'
  },
  valueText: {

  },
  examinationContainer: {
    backgroundColor: '#fff',
    paddingLeft: 10,
    paddingRight: 10,
    marginBottom:20,
  },
  titleContainer: {
    paddingTop: 8,
    paddingBottom: 8,
    justifyContent: 'center',
  },
  titleText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: Colors.btnPrimaryBg,
  },
  formContainer: {
    display: 'flex',
    height: '60%',
  },
  rowContainer: {
    display: 'flex',
    flexDirection: 'row',
  },
  operationContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, .03)',
  },
  operationValueContainer: {
    flex: 4,
    flexDirection: 'row',
  },
  radioBtn: {
    justifyContent: 'center',
    width: 70,
    marginLeft: 10,
  },
  radioBtnText: {
    fontSize: 18,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  selectedText: {
    backgroundColor: Colors.btnPrimaryBg,
    color: '#fff',
  },
  textInputStyle: {
    flex: 1,
  },
});